<template>
    <div>
        <!-- <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="userGender">
        <el-input
          type="text"
          v-model="ruleForm.userGender"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="userCode">
        <el-input
          type="text"
          v-model="ruleForm.userCode"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="生日" prop="userBirthday">
        <el-date-picker v-model="ruleForm.userBirthday" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input
          type="text"
          v-model="ruleForm.address"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form> -->
        <el-form ref="registerForm" :model="registerForm">
            <el-form-item>
                <el-input
                    prefix-icon="el-icon-user-solid"
                    placeholder="请输入用户名"
                    v-model="registerForm.username"
                >
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-input
                    prefix-icon="el-icon-user-solid"
                    placeholder="请输入账号"
                    v-model="registerForm.userCode"
                >
                </el-input>
            </el-form-item>

            <el-form-item label="出生日期">
                <el-date-picker
                    v-model="registerForm.userBirthday"
                    type="datetime"
                    value-format="yyyy-MM-dd"
                    placeholder="出生日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>

                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
            </el-form-item>

            <el-form-item>
                <el-input
                    prefix-icon="el-icon-s-opportunity"
                    placeholder="请输入密码"
                    show-password
                    v-model="registerForm.password"
                >
                </el-input>
            </el-form-item>

            <el-form-item>
                性别：
                <el-radio v-model="registerForm.userGender" label="男"
                    >男</el-radio
                >
                <el-radio v-model="registerForm.userGender" label="女"
                    >女</el-radio
                >
            </el-form-item>

            <el-form-item>
                <el-input
                    prefix-icon="el-icon-s-opportunity"
                    placeholder="地址"
                    v-model="registerForm.address"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                    prefix-icon="el-icon-s-opportunity"
                    placeholder="用户介绍"
                    v-model="registerForm.userDesc"
                >
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="register" class="loginbtn" type="primary">
                    注册
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { registAPI } from "@/api";
export default {
    name: "Regist",

    data() {
        return {
            registerForm: {
                uid: 0,
                username: "",
                userCode: "",
                userBirthday: "",
                userImg: "",
                password: "",
                userGender: "",
                identity: "普通用户",
                address: "",
                userDesc:""
            },
            dialogImageUrl: "",
            dialogVisible: false,
        };
    },

    mounted() {},

    methods: {
        async register() {
            const registRes = await registAPI(this.registerForm);
            if (registRes.data.statusCode === 200) {
                console.log((registRes.data.data.userBirthday));
                this.$notify({
                    title: "注册成功",
                    message: registRes.data.message,
                    type: "success",
                });
                this.$router.push("/login");
            } else {
                this.$notify.error({
                    title: "错误",
                    message: "注册失败",
                });
                return false;
            }
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
    },
};
</script>

<style scoped>
.el-form {
    width: 400px;
}
</style>
